<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SudokuView</title>

<style type="text/css">

body {
    background: #333;
    color:#fff;
	cursor:pointer;
    font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
}

#holder {
    position: absolute;
}

#toolbar {
	float: right;
	margin-right:50px;
	margin-top:50px;
}

div.panel,p.flip
{
	margin:0px;
	padding:5px;
	text-align:center;
	background:#333;
	border:solid 1px #c3c3c3;
}

div.panel
{
	height:120px;
	display:none;
}

</style>

<script language="javascript" type="text/javascript" src="SudokuLogic.js" charset="utf-8"></script>

<script type="text/javascript" src="lib/raphael.js" charset="utf-8"></script>
<script type="text/javascript" src="lib/g.raphael.js" charset="utf-8"></script>
<script type="text/javascript" src="lib/jquery-1.7.2.js" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
		var aBoard = [
			3, 0, 0, 5, 0, 1, 0, 7, 0,
			0, 4, 9, 0, 0, 8, 0, 1, 0,
			0, 0, 8, 0, 0, 0, 0, 0, 3,
			0, 6, 1, 3, 0, 0, 0, 0, 4,
			7, 9, 0, 0, 0, 0, 0, 5, 1,
			4, 0, 0, 0, 0, 6, 7, 3, 0,
			9, 0, 0, 0, 0, 0, 8, 0, 0,
			0, 5, 0, 1, 0, 0, 3, 6, 0,
			0, 3, 0, 2, 0, 5, 0, 0, 9,
		];
		var answer = [
			3, 2, 6, 5, 9, 1, 4, 7, 8,
			5, 4, 9, 7, 3, 8, 2, 1, 6,
			1, 7, 8, 4, 6, 2, 5, 9, 3,
			2, 6, 1, 3, 5, 7, 9, 8, 4,
			7, 9, 3, 8, 2, 4, 6, 5, 1,
			4, 8, 5, 9, 1, 6, 7, 3, 2,
			9, 1, 4, 6, 7, 3, 8, 2, 5,
			8, 5, 2, 1, 4, 9, 3, 6, 7,
			6, 3, 7, 2, 8, 5, 1, 4, 9,
		];

/*var aBoard = [
			01, 02, 03, 04, 05, 06, 07, 08, 09,
			10, 11, 12, 13, 14, 15, 16, 17, 18,
			19, 20, 21, 22, 23, 24, 25, 26, 27,
			28, 29, 30, 31, 32, 33, 34, 35, 36,
			37, 38, 39, 40, 41, 42, 43, 44, 45,
			46, 47, 48, 49, 50, 51, 52, 53, 54,
			55, 56, 57, 58, 59, 60, 61, 62, 63,
			64, 65, 66, 67, 68, 69, 70, 71, 72,
			73, 74, 75, 76, 77, 78, 79, 80, 81,
			];*/

/*
function   mouse_down(){ 
    if(event.button==2){
    	alert(0);
	} 
} 
oncontextmenu="return false"   //防右键
onselectstart="return false" 	//防选择
oncopy="return false"  		//防copy
oncut="return false"  		//防剪切
onpaste="return false" 		//防粘贴
document.onmousedown=mouse_down;
*/
/*document.oncontextmenu=function(){
    return false;
}*/


document.onselectstart=function(){
	return false;
}

window.onload = function () {	
	$(".holder").hide();
	$(".toolbar").hide();
};

$(document).ready(function(){
	$(".flip").click(function(){
		$(".panel").slideToggle("slow");
		$(".remind").show("slow");
		$(".toolbar").hide("slow");
		$(".holder").hide("slow");
		$(".holder").html("");
	});
	
	$(".three").click(function(){
		var board = new Sudoku.Board(2);
		console.log("initialize");
		$(".holder").html("");
		playSudoku(board);
		$(".panel").hide(500,function(){
			$(".remind").hide(500, function(){
				$(".holder").show("slow");
			});
		});
	});
	
	$(".nine").click(function(){
		var board = new Sudoku.Board(3);
		console.log("initialize");
		$(".holder").html("");
		playSudoku(board);
		$(".panel").hide(500,function(){
			$(".remind").hide(500, function(){
				$(".holder").show("slow");
			});
		});
	});
});



playSudoku = function(board){
	console.log(board.getBoardGridCount());
	//var conflicts = board.initialize(aBoard);
	var MatrixSize = board.getBoardGridCount();
	var MatrixColumn = Math.sqrt(MatrixSize);
	var smallMatrixColumn = Math.sqrt(MatrixColumn);

	var paper = Raphael("holder",MatrixColumn*60, MatrixColumn*60);

	var l = paper.set();

	//drawToolBar();
	console.log("test");
	var col = 0;
	var sum = 0;

	for (var i =0 ; i < MatrixSize; i++) {
		if(sum == MatrixColumn) col++ , sum=0;
		if(col == MatrixColumn) col =0;
		l.push(
			paper.rect(col*60, sum*60, 50, 50, 5).attr({fill: "#333",  stroke: "#333"})
		);
		++sum;
	};

	for (var i =0 ; i < MatrixSize; i++) {
		l[i].animate({fill:"#fff", stroke: "#54b935"},1000,"<");
	};

	gridText();	

	function gridText(){

		var col2 = 0;
		var sum2 = 0;
		var txtLayout = paper.set();
		for (var i =0 ; i < MatrixSize; i++) {
			
			if(sum == MatrixColumn) col++ , sum=0;
			if(col == MatrixColumn) col =0;
			if(board.getNumberByIndex(i) != 0 ){
				txtLayout.push(
					paper.text(col*60+25, sum*60+25, board.getNumberByIndex(i)).attr({fill: "#333"})
				);	
			}
			txtLayout.push(
				paper.text(col*60+25, sum*60+25, "").attr({fill: "#333"})
			);	
			++sum;
		};

		for (var i =0 ; i < MatrixSize; i++) {
			txtLayout[i].animate({fill: "#f00"},1200,"<");
		};
	}

	for (var i =0; i < MatrixSize; i++) {
		bind(i);
	};
	
	function bind(i){
		l[i].click(function(){
			showToolbar(i);

		}).mouseover(function(){
			this.animate({fill: "orange"}, 100);
		}).mouseout(function(){
			this.animate({fill: "white"}, 100);
		});
	}

	function showToolbar(i){
		console.log("工具栏出现");
		//alert(aBoard[i]);	
		//$(".toolbar").show("slow");
	}

	var marL = (window.screen.width-MatrixColumn*60)/2;
	document.getElementById("holder").style.marginLeft = marL + "px";
	document.getElementById("holder").style.height = MatrixColumn*60 +"px";
	document.getElementById("holder").style.width = MatrixColumn*60 +"px";

	var marT = (window.screen.height-MatrixColumn*60)/5;
	document.getElementById("holder").style.marginTop = marT + "px";

	/*function drawToolBar(){
		var toolBarWidth = (window.screen.width-MatrixColumn*60)/3;
		document.getElementById("toolbar").style.width = toolBarWidth + "px";
	
		var toolBarHeight = smallMatrixColumn*60;
	
		var toolBarRap = Raphael("toolbar",toolBarWidth, toolBarHeight);
		var tlb = toolBarRap.set();
		tlb.push(
			toolBarRap.rect(0, 0, toolBarWidth, toolBarHeight, 5).attr({fill: "#fff",  stroke: "#54b935"}),
			toolBarRap.text(20, 20, "toolBar").attr({fill: "#333"})
		);
	}*/
}
</script>
</head>

<body>
	<!--<p style=" position:absolute; bottom:450px; left::0" class="remindBtn">remind</p>-->
	<div class="remind" style=" color:#999; position:absolute; cursor:default; bottom:200px; left::0; font-family:Microsoft Yahei","SimHei">
   		<p style="font-size:20px;"><b>Remind : </b></p>
    	<p>hi,guys</p>
        <p>这是一个开源的js游戏</p>
        <p>这个游戏叫数独</p>
        <p>你如果想完成游戏,必须使每一列和每一排都没有重复的数</p>
        <p>并且在每一个被线封装起来的区域内,也不能有数字重复</p>
        <p>长按可以弹出快捷动作栏(未完工)</p>
        <p>点击可以打开工具栏(不能使用)</p>
    </div>

    <div style=" position:absolute; bottom:0; left::0; cursor:default;">
        <p style="color:#999; font-size:100px; ">Sudoku</p>
    </div>
    
	<div class="panel">
		<p class="three">4*4</p>
		<p class="nine">9*9</p>
	</div>
    
	<p class="flip">menu</p>
	<div class="holder" id="holder"></div>
	<!--<div class="toolbar" id="toolbar" ></div>-->
	
</body>
</html>
